<!DOCTYPE html>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="static/lib/layui-v2.6.3/css/layui.css" media="all">
    <link rel="stylesheet" href="static/css/public.css" media="all">
    <style>
        #demo1 {
            width: 100px;
            height: 100px;
        }

        body {
            background-color: #ffffff;
        }

        .tishi {
            color: red;
        }

        .tishi0 {
            color: red;
        }

        .tishi1 {
            color: red;
        }
        .tishi5 {
            color: red;
        }
    </style>
</head>
<body>
<form>
    <div class="layui-form layuimini-form">
        <div class="layui-form-item">
            <label class="layui-form-label required">用户名</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入用户名" autocomplete="off"
                       class="layui-input" id="yhm"><span class="tishi"></span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" lay-verify="required" lay-reqtext="密码不能为空" placeholder="请输入密码"
                       value="" class="layui-input" id="mm"><span class="tishi0"></span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">确认密码</label>
            <div class="layui-input-block">
                <input type="password" name="password" lay-verify="required" lay-reqtext="确认密码不能为空"
                       placeholder="请再次输入密码" value="" class="layui-input" id="mm2"><span class="tishi1"></span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">性别</label>
            <div class="layui-input-block">
                <input type="radio" name="sex" value="1" title="男" checked>
                <input type="radio" name="sex" value="2" title="女">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">手机号</label>
            <div class="layui-input-block">
                <input type="text" name="phone" lay-verify="required" lay-reqtext="手机号不能为空"
                       placeholder="请输入手机号" value="" class="layui-input" id="phone"><span class="tishi5"></span>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label required">状态</label>
            <div class="layui-input-block">
                <input type="radio" name="zt" value="1" title="启用" checked>
                <input type="radio" name="zt" value="0" title="禁用">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">头像</label>
            <div class="layui-input-block">
                <button type="button" class="layui-btn" id="test1">上传图片</button>
                <div class="layui-upload-list">
                    <img onclick="showimg(this)" class="layui-upload-img" id="demo1">
                    <p id="demoText"></p>
                </div>
                <div style="width: 95px;">
                    <div class="layui-progress layui-progress-big" lay-showpercent="yes" lay-filter="demo">
                        <div class="layui-progress-bar" lay-percent=""></div>
                    </div>
                </div>
            </div>
        </div>
        <%--    隱藏表单 存储上传成功后 回调返回的文件名--%>
        <input type="hidden" name="photo" id="photo"><br>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn layui-btn-normal" lay-submit lay-filter="saveBtn" id="saveBtn">确认保存</button>
            </div>
        </div>
    </div>
</form>
<script src="static/lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script>
    layui.use(['form', 'upload', 'table', 'element', 'layer'], function () {
        var form = layui.form
        let $ = layui.jquery
            , upload = layui.upload
            , element = layui.element
            , layer = layui.layer;
        //监听提交
        form.on('submit(saveBtn)', function (data) {
            let a = document.getElementById("demo1").src;
            if (a == "" || a == null) {
                $("#photo").val("初始化.png");
            }
                let post_data = $("form").serialize();
                $.ajax({
                    "url": "gly?opr=addSave",
                    "dataType": 'text',
                    "type": 'post',
                    "data": post_data,
                    async: false,
                    "success": function (date) {
                        if (date == "true") {
                            layer.msg('新增成功', {icon: 1, time: 1500}, function () {
                                var index = parent.layer.getFrameIndex(window.name);
                                parent.layer.close(index);
                                let b=sessionStorage.obs;
                                let a=b.replace(/\"/g, "");
                                let cz="管理员操作";
                                let gn="管理员新增";
                                let jg="成功";
                                $.ajax({
                                    "url": "gly?opr=xmr",
                                    "data": {name:a,cz:cz,gn:gn,jg:jg}
                                })
                            });
                        } else {
                            layer.msg('新增失败', {icon: 2, time: 1500});
                            let b=sessionStorage.obs;
                            let a=b.replace(/\"/g, "");
                            let cz="管理员操作";
                            let gn="管理员新增";
                            let jg="失败";
                            $.ajax({
                                "url": "gly?opr=xmr",
                                "data": {name:a,cz:cz,gn:gn,jg:jg}
                            })
                        }
                    }
                });
                // layer.close(index);
            return false;
        });

        //上传文件
        var uploadInst = upload.render({
            elem: '#test1'
            , url: 'gly?opr=upload' //此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
            , before: function (obj) {
                //预读本地文件示例，不支持ie8
                obj.preview(function (index, file, result) {
                    $('#demo1').attr('src', result); //图片链接（base64）
                });
                element.progress('demo', '0%'); //进度条复位
                layer.msg('上传中', {icon: 16, time: 0});
            }
            , done: function (res) {
                //如果上传失败
                if (res.code > 0) {
                    return layer.msg('上传失败');
                }
                // 给隐藏表单赋值
                $("#photo").val(res.imgSrc);
                $('#demoText').html('');
            }
            , error: function () {
                //演示失败状态，并实现重传
                var demoText = $('#demoText');
                demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
                demoText.find('.demo-reload').on('click', function () {
                    uploadInst.upload();
                });
            }
            //进度条
            , progress: function (n, elem, e) {
                element.progress('demo', n + '%'); //可配合 layui 进度条元素使用
                if (n == 100) {
                    layer.msg('上传完毕', {icon: 1});
                }
            }
        });
        $("input[name=name]").blur(function () {
            let name = $("input[name=name]").val();
            if (name.length > 8) {
                $(".tishi").text("用户名不得超过8个字符").show(200);
                $(".tishi").delay(2500).hide(200);
            }
            $.ajax({
                "url": "gly?opr=checkName",
                "dataType": 'json',
                "type": 'post',
                "data": {name: name},
                "success": function (date) {
                    if (date == true) {
                        // 对date页面进行操作
                        $(".tishi").text("用户名已存在 请更换").show(200);
                        $(".tishi").delay(2500).hide(200);
                    }
                },
                "error": function () {
                }
            });
        });
        $("input[id=mm]").blur(function () {
            var pwd1 = document.getElementById("mm").value;
            var uPattern = /^[a-zA-Z0-9_-]{8,12}$/;
            if (uPattern.test(pwd1) != true && (pwd1 != null && pwd1 != "")) {
                $(".tishi0").text("密码格式输入错误 8到12位(字母，数字，下划线，减号)").show(200);
                $(".tishi0").delay(2500).hide(200);
            }
        })
        $("input[id=phone]").blur(function () {
            let name = $("input[name=phone]").val();
            var mPattern = /^((13[0-9])|(14[5|7])|(15([0-3]|[5-9]))|(18[0,5-9]))\d{8}$/;
            if (mPattern.test(name) != true && (name != null && name != "")) {
                $(".tishi5").text("手机号格式输入错误").show(200);
                $(".tishi5").delay(2500).hide(200);
            }
        })
        $("input[id=mm2]").blur(function () {
            var pwd1 = document.getElementById("mm").value;
            var pwd2 = document.getElementById("mm2").value;
            if (pwd2 != pwd1 && (pwd2 != null && pwd2 != "")) {
                $(".tishi1").text("两次输入密码不一致 请重新输入").show(200);
                $(".tishi1").delay(2500).hide(200);
            }
        })

    });

    function showimg(t) {
        layer.open({
            type: 1,
            title: false,
            closeBtn: 0,
            area: '516px',
            skin: 'layui-layer-nobg', //没有背景色
            shadeClose: true,
            content: '<img style="display: inline-block; width: 100%; height: 100%;" src="' + t.src + '">'
        });
    }
</script>
</body>
</html>
